<template>
	<view class="detail">
		<cu-custom bgImage="" :isBack="true"><block slot="backText">返回</block>
			<block slot="content">记账簿</block>
		</cu-custom>
		<view class="cu-bar  solid-bottom">
			<view class='action'>
				<text class='cuIcon-title text-blue'></text>明细清单,左滑更多操作
			</view>
		</view>
		<!-- 按组使用 -->
		<view class="cu-list menu-avatar" >
			<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in datas" :key="index"
			 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
				
				<view class="cu-avatar round lg" style="margin-right: 10rpx;"> <image :src="item.url1" class="image" /></view>
				<view class="content" style="display: flex;">
					<view  class="text-grey margin-right-sm">{{item.type}}</view>
					<text  class="text-grey ">￥{{item.money}}</text>
				</view>
				<view class="text-gray text-sm">
					<text class=" margin-right-xs"></text> 小目标还没有实现！</view>

				<view class="action">
					
					<view class="text-grey text-xs">{{ item.formatDate }}</view>
				</view>
				<view class="move">
					<view class="bg-grey" @click="onClick({index:0},item)">修改</view>
					<view class="bg-red" @click="onClick({index:1},item)">删除</view>
				</view>
			</view>
		</view>
		
		

		
		<uni-load-more color="#547981" :status="loadMoreStatus" v-if="isShowLoadMore" iconType="auto" @clickLoadMore="clickLoadMore"
		 :content-text="contentText" />
		 

	</view>
</template>

<script>
	
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'

	import {
		callCloudFunction,
		getUserOpenid
	} from '@/common/public_util.js';

	let _self;
	export default {
		components: {
			
			uniLoadMore,
			
		},
		data() {
			return {
				options: [{
						text: '修改',
						style: {
							backgroundColor: '#007dd5'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					},
				],
				datas: [],
				isShowLoadMore: false, //是否显示上啦加载
				loadMoreStatus: 'more', //上啦加载状态，more加载前，loading加载中，noMore没有更多
				pageNumber: 1, //页码
				pageSize: 10, //加载数量
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				
				skin: false,
				listTouchStart: 0,
				listTouchDirection: null,
				modalName:''
			}
		},
		onLoad() {
			_self = this;
		},
		onShow() {
			_self.onQuery();
		},
		methods: {
			// ListTouch触摸开始
			ListTouchStart(e) {

				this.listTouchStart = e.touches[0].pageX
			},
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},
			
			
			
			
			onClick(e, item) {
				switch (e.index) {
					case 0: //修改
						uni.setStorageSync('modifyDetailed',item);
						
						uni.switchTab({
							url: '/pages/app/bookkeeping/bookkeeping',
							animationType:'none',
							complete: (res) => {
								console.log(res);
							}
						});
						break;
					case 1: //删除
						callCloudFunction('money_del', item, (res) => {
							uni.showToast({
								icon: "none",
								title: '操作成功',
								duration: 2000
							});
							callCloudFunction('money_query', {
								openid: getUserOpenid(),
							}, (res) => {
								_self.datas = res.data;
							});
						});
						break;
				}

			},

			
			clickLoadMore: (e) => { //加载更多
			console.log(e);
				if (e.detail.status == 'more') {
					_self.pageNumber++;
					_self.onQuery(e);
				}
			},
			onQuery: (e) => {
				if (e == null || e.detail == null || e.detail.status != 'more') {
					_self.pageNumber = 1;
					_self.datas = [];
				}
				_self.isShowLoadMore = true;
				_self.loadMoreStatus = 'loading'; //loading加载中

				callCloudFunction('money_query', {
					openid: getUserOpenid(),
					pageNumber: _self.pageNumber,
					pageSize: _self.pageSize,
				}, (res) => {
					let total = res.total;
					_self.datas = _self.datas.concat(res.data);
					//全部
					if (_self.datas.length >= total) {
						_self.loadMoreStatus = 'noMore'; //noMore没有更多
					} else {
						_self.loadMoreStatus = 'more'; //more加载前
					}
				});
			}
		}
	}
</script>

<style  lang="scss" scoped>
	.detail{
		box-sizing: border-box;
		// padding-bottom: 40rpx;
		height: 100%;
		overflow-y: scroll;
	}
	.image {
		width: 50rpx;
		height: 50rpx;
	}
	
	.cu-avatar{
		background-color: #e8f4d9;
	}
</style>
